
<template>
    <div class="detail-container">
        <div class="fix-header">
            <div class="backPage" @click="backPage" >
                <image class="arrow_left" :src="imgPath('back.png')"></image>
                <text class="back col_fff medium">返回</text>
            </div>
            <div class="search">
                <div class="fix-img">
                    <img :src="imgPath('search.png')" class="img">
                </div>
                <input type="text" class="fix-search" placeholder="请输入搜索内容"  >
            </div>
        </div>
        <scroller>
            <div class="choose"  >
                <div class="choose-item">
                    <text class="choose-text">智能</text>
                    <image :src="imgPath('default_1.png')" class="arrow-img"></image>
                </div>
                <div class="choose-item price">
                    <text class="choose-text">价格</text>
                    <div class="all-img">
                        <image :src="imgPath('default_1.png')" class="arrow-img"></image>
                        <image :src="imgPath('default_2.png')" class="arrow-img"></image>
                    </div>
                </div>
                <div class="choose-item" @click="showShop">
                    <text class="choose-text">店铺</text>
                </div>

                <div class="choose-item" @click="openOverlay">
                    <text class="choose-text">筛选</text>
                    <image :src="imgPath('screen_click_03.png')" class="shaixuan-img"></image>
                </div>
            </div>
            <div class="img-wrap" v-if="showChoose">
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
                <div class="img-list">
                    <image :src="imgPath('pic_65.png')" class="list-pic"></image>
                    <text class="introduce">印花面料绿色染印工绿色绿色</text>
                    <div class="address">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="addtext ">厦门市思明区软件二期...</text>
                    </div>
                </div>
            </div>
            <div class="shop-wrap" v-if="showshop">
                <div class="shop-item">
                    <div class="shop-header">
                        <div class="store-imgwrap">
                            <img :src="imgPath('storelogo.png')" class="store-img">
                        </div>
                        <div class="shop-detail">
                            <text class="store-name">爱奇艺沙滩泳装旗舰店</text>
                            <div class="person">
                                <div class="see">
                                    <image :src="imgPath('follow.png')" class="seeImg"></image>
                                    <text class="seeText">52.2万</text>
                                </div>
                                <div class="see look">
                                    <image :src="imgPath('Swimsuit.png')" class="seeImg"></image>
                                    <text class="seeText">1000</text>
                                </div>
                            </div>
                        </div>
                        <text class="come-shop">进店</text>
                    </div>
                    <div class="shop-bottom">
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                    </div>
                </div>
                <div class="shop-item">
                    <div class="shop-header">
                        <div class="store-imgwrap">
                            <img :src="imgPath('storelogo.png')" class="store-img">
                        </div>
                        <div class="shop-detail">
                            <text class="store-name">爱奇艺沙滩泳装旗舰店</text>
                            <div class="person">
                                <div class="see">
                                    <image :src="imgPath('follow.png')" class="seeImg"></image>
                                    <text class="seeText">52.2万</text>
                                </div>
                                <div class="see look">
                                    <image :src="imgPath('Swimsuit.png')" class="seeImg"></image>
                                    <text class="seeText">1000</text>
                                </div>
                            </div>
                        </div>
                        <text class="come-shop">进店</text>
                    </div>
                    <div class="shop-bottom">
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                    </div>
                </div>
                <div class="shop-item">
                    <div class="shop-header">
                        <div class="store-imgwrap">
                            <img :src="imgPath('storelogo.png')" class="store-img">
                        </div>
                        <div class="shop-detail">
                            <text class="store-name">爱奇艺沙滩泳装旗舰店</text>
                            <div class="person">
                                <div class="see">
                                    <image :src="imgPath('follow.png')" class="seeImg"></image>
                                    <text class="seeText">52.2万</text>
                                </div>
                                <div class="see look">
                                    <image :src="imgPath('Swimsuit.png')" class="seeImg"></image>
                                    <text class="seeText">1000</text>
                                </div>
                            </div>
                        </div>
                        <text class="come-shop">进店</text>
                    </div>
                    <div class="shop-bottom">
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                        <div class="display">
                            <img :src="imgPath('pic_66.png')" class="displayImg">
                            <text class="displayText">￥108.00</text>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
        <div class="modal" v-if="showModal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="close">
                        <img :src="imgPath('close.png')" class="closeImg" @click="closeModal">
                    </div>
                    <text class="shaixuan">筛选</text>
                </div>
                <div class="all" @click="showAll" >
                    <text class="allText" >全部</text>
                    <image  class="arrow" :src="imgPath( Urlpath ? 'arrow_bottom.png': 'arrow_top.png' )"></image>
                </div>
                <wxc-grid-select v-if="alltrue" class="gridSelect"
                                 :list="testData2" :cols="3"  :single="true">
                </wxc-grid-select>
                <div class="all all-gradient" @click ="showAllGradient">
                    <text class="allText" >全部布料</text>
                    <image  class="arrow" :src="imgPath( Urlpath1 ? 'arrow_bottom.png': 'arrow_top.png' )"></image>
                </div>
                <div class="gradient"  v-if="allGradient">
                    <div class="type">
                        <text class="typename">里布</text>
                        <wxc-grid-select  class="gridSelect"
                                          :list="testData3" :cols="3"  :single="true">
                        </wxc-grid-select>
                    </div>
                    <div class="type">
                        <text class="typename">印花</text>
                        <wxc-grid-select  class="gridSelect"
                                          :list="testData3" :cols="3"  :single="true">
                        </wxc-grid-select>
                    </div>
                    <div class="type">
                        <text class="typename">提花</text>
                        <wxc-grid-select  class="gridSelect"
                                          :list="testData3" :cols="3"  :single="true">
                        </wxc-grid-select>
                    </div>
                </div>
                <div class="modal-bottom">
                    <text class="reset">重置</text>
                    <text class="confirm">确认</text>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import ImageUpload from '../../components/imageUpload'
// import { WxcOverlay } from 'weex-ui'
import WxcGridSelect from '@/components/grid-select'
// import { storeList } from '@/api/store'
// const modal = weex.requireModule('modal')
export default {
  name: 'storeAddress',
  components: { ImageUpload, WxcGridSelect },
  data () {
    return {
      lineSpacing: '24px',
      showChoose: true,
      showshop: false,
      showModal: false,
      alltrue: false,
      Urlpath: true,
      Urlpath1: true,
      pageNo: 1,
      pageSize: 3,
      allGradient: true,
      customStyles: {
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#666666',
        checkedBorderColor: '#ffb200',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#ffb200'
      },
      testData2: [
        {
          'title': '全部商品'
        },
        {
          'title': '推荐专区'
        },
        {
          'title': '活动专区'
        },
        {'title': '布料',
          checked: true
        },
        {
          'title': '辅料'
        },
        {
          'title': '胸杯'
        },
        {
          'title': '扣类'
        },
        {
          'title': '包装材料'
        },
        {
          'title': '其他'
        }
      ],
      testData3: [
        {
          'title': '全部素色'
        },
        {
          'title': '尼龙氨纶'
        },
        {
          'title': '涤纶氨纶'
        },
        {
          'title': '其他',
          checked: true
        }
      ]
    }
  },
  methods: {
    // 点击店铺
    showShop () {
      this.showChoose = false
      this.showshop = true
      // const that = this
      // let url = storeList + '?'
      // let params = {
      //   pageNo: that.pageNo,
      //   pageSize: that.pageSize
      // }
      // console.log(url)
      // that.$api.get(url, params, function (res) {
      //   modal.toast({
      //     message: JSON.stringify(res)
      //   })
      // })
    },
    openOverlay () {
      this.showModal = true
      // console.log(222)
    },
    closeModal () {
      this.showModal = false
    },
    showAll () {
      this.alltrue = !this.alltrue
      this.Urlpath = !this.Urlpath
    },
    showAllGradient () {
      this.Urlpath1 = !this.Urlpath1
      this.allGradient = !this.allGradient
    },
    backPage () { // 返回
      if (this.close) {
        this.$emit('closeDialog')
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style>
</style>
<style scoped>
    .fix-header {
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        align-items: center;
        position: relative;
        display: flex;
        flex-direction: row;
    }
    .backPage {
        flex-direction: row;
        align-items: center;
        height: 88px;
        padding-right: 32px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 34px;
        line-height: 88px;
        color: #fff;
    }
    .search {
        align-items: center;
        display: flex;
        flex-direction: row;
        width: 566px;
        height: 60px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .fix-img {
        width: 62px;
        height: 60px;
        align-items: center;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .img {
        width: 28px;
        height: 28px;
        margin-top: 15px;
    }
    .fix-search {
        height: 60px;
        width: 500px;
        border: none;
        background-color: #fff;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 24px;
        color: #333;
    }
    .choose{
        height:70px;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .choose-item{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .choose-text{
        font-size:26px;
        color: rgb(70,70,70);
        margin-right:12px ;
    }
    .arrow-img{
        width:20px;
        height:19px;
    }
    .shaixuan-img{
        width:24px;
        height:24px;
    }
    .all-img{
        display: flex;
        flex-direction: column;
    }
    .introduce {
        font-size: 26px;
        margin-top: 23px;
        text-overflow: ellipsis;
        /*overflow: hidden;*/
        color: rgb(70, 70, 70);
        lines: 1;
        padding-left: 24px;
        padding-right:24px;
    }
    .address{
        margin-top:25px;
        flex-direction: row;
        align-items: center;
        padding-bottom:30px;
        padding-left: 24px;
        padding-right:24px;
    }
    .addimg{
        width:22px;
        height:22px;
    }
    .addtext{
        font-size:25px;
        lines:1;
        color:rgb(134,134,131);
        margin-left: 5px;
    }
    .img-wrap{
        padding-top: 8px;
        padding-bottom: 30px;
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: rgb(236,237,237);
    }
    .img-list{
        width:343px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom:16px;
        box-shadow: 0px 0px 10px 3px rgba(43,48,64,0.12);
        background-color: #fff;
        /*float: left;*/
    }
    .list-pic{
        width:343px;
        height:343px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    .shop-wrap{
        background-color: rgb(245,245,245);
        flex-wrap: wrap;
        flex-direction: column;
        padding-bottom: 30px;
    }
    .shop-item{
        margin-top:16px;
        background-color: #fff;
        padding-left:24px;
        padding-right:24px;
        padding-top:21px;
        padding-bottom:49px;
        flex: 1;
    }
    .shop-header{
        flex-direction: row;
        justify-content: space-between;
        padding-bottom:25px;
    }
    .store-imgwrap{
        border-width: 1px;
        border-style: solid;
        border-color: rgb(245,245,245);
        padding-top: 14px;
        padding-bottom: 14px;
        width: 180px;
    }
    .store-img{
        width:180px;
        height:60px;
    }
    .shop-detail {
        width: 310px;
        flex-direction: column;
        margin-left: 24px;
    }
    .store-name{
        font-size:30px;
        color:rgb(134,134,134);
        lines:1;
        text-overflow: ellipsis;
    }
    .person{
        margin-top:15px;
        flex-direction: row;
        justify-content: center;
    }
    .see{
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .seeImg{
        width:42px;
        height:42px;
        margin-right: 14px;
    }
    .seeText{
        font-size:24px;
        color:rgb(134,134,134);
    }
    .look{
        margin-left: 70px;
    }
    .come-shop{
        border-width: 1px ;
        border-style: solid;
        border-color: rgb(254,203,1);
        color: rgb(254,208,27);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width:98px;
        height:36px;
        text-align:center;
        line-height:36px;
        font-size:26px;
        background-color: rgb(245,245,245);
        /*margin-left:93px*/
    }
    .shop-bottom{
        border-top-color: rgb(235,235,235);
        border-top-style: solid;
        border-top-width: 1px;
        padding-top:19px;
        flex-direction: row;
        justify-content: space-between;
    }
    .displayImg{
        width:226px;
        height:226px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .display{
        position:relative;
    }
    .displayText{
        position: absolute;
        right:0;
        bottom:0;
        width:110px;
        height:36px;
        background-color: rgba(43,48,64,0.7);
        font-size: 24px;
        color:rgb(255,255,255);
        line-height:36px;
        text-align:center;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .modal{
        position:absolute;
        right:0;
        top:0;
        left: 0;
        bottom: 0;
        background-color: rgba(43,48,64,0.12);
    }
    .modal-content{
        width:550px;
        top:0;
        right:0;
        bottom:0;
        background-color: rgb(245,245,245);
        position:fixed;
    }
    .modal-header{
        height: 90px;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
    }
    .close{
        width: 31px;
        height: 31px;
        background-color: rgba(43,48,64,0.3);
        border-radius: 50%;
    }
    .closeImg{
        width: 31px;
        height: 31px;
    }
    .shaixuan {
        margin-left: 223px;
        font-size:32px;
        color:rgb(70,70,70);
    }
    .all{
        height: 68px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(235,235,235);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
        background-color: #Ffff;
        padding-left: 24px;
        padding-right: 24px;
    }
    .allText{
        font-weight: bold;
        font-size: 28px;
    }
    .arrow{
        width:28px;
        height:28px;

    }
    .gridSelect{
        padding-top: 14px;
        padding-bottom: 24px;
        background-color: #Ffff;
        padding-left: 24px;
        padding-right: 24px;
    }
    .all-gradient{
        margin-top: 16px;
    }
    .type{
        flex-direction: column;
        padding-top:24px;
        background-color: #fff;

    }
    .typename{
        font-size:24px;
        color:rgb(206,206,206);
        padding-left: 24px;
        padding-right: 24px;
    }
    .modal-bottom{
        height: 98px;
        position: fixed;
        bottom: 0;
        border-top-color: rgb(245,245,245);
        border-top-style: solid;
        border-top-width: 1px;
        flex-direction:row;
        flex:1;
    }
    .reset{
        width:275px;
        height:98px;
        background-color:#fff;
        font-size:30px;
        color:rgb(134,134,134);
        line-height:98px;
        text-align:center;
    }
    .confirm{
        width: 275px;
        height: 98px;
        background-color: rgb(162,162,162);
        font-size:30px;
        line-height:98px;
        text-align:center;
        color:rgb(255,255,255)
    }
</style>
